<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									贷款信息
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="loanInfo" placeholder="输入贷款信息" :value="loanInfo"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									交费信息
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="payInfo" placeholder="输入交费信息" :value="payInfo"/>
										
							</view>
						</view>
						
					
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									是否欠费
								</view>
							</view>
							<view class="right">
								<picker @change="isArrearsChange" :value="isArrearsIndex" :range="isArrearsArray" name="registrationType">
									<view class="uni-input">{{isArrearsArray[isArrearsIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>	
							</view>
						</view>
						
					
						
						
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const loanInfo =ref('');//贷款信息
const payInfo =ref('');//交费信息
const isArrearsArray =ref(['请选择','否','是']);//是否欠费
const isArrearsIndex =ref(0);

const formSubmit = (e)=>{
	console.log(e);
}

// 是否欠费
const isArrearsChange = (e)=>{
	
	isArrearsIndex.value = e.detail.value;
}





</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>